<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>

    {{info}}
    <input type="button" value="异步get请求" @click="f()">
    <input type="button" value="异步post请求" @click="f2()">
</div>
<!--引入axios和vue框架-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<script>
    let v = new Vue({
            el:"body>div",
            data:{
               info:"一部测试"
            },
            methods: {
                f() {
                    axios.get("/helloAxios?name=tom&age=18").then(function (response) {
                        /*alert 弹出对话框*/
                        // alert(response.data);
                        v.info = response.data;
                    })
                },
                f2() {
                    let data = {name: "tom", age: 18};
                    axios.post("/postAxios",data).then(function (response) {
                        v.info = response.data;
                    })

                }

            }
        })
</script>
</body>
</html>